<template>
  <!-- <div class="myview">
    <div class="toall_box" v-for="item in maindata" :key="item.id">
      <div class="text_box">
        <div class="text_title">{{ item.title }}</div>
        <div class="text_author">{{ item.hint }}</div>
      </div>
      <div class="img_box"><img :src="item.images" alt="" /></div>
    </div>
    <div class="loading" @click="getmore">加载更多</div>
  </div> -->
  <div class="massage_essay">
    <div class="essay_data" v-for="(item,index) in maindata" :key="index">
      <div class="essay_content">
        <div class="essay_title" @click="godetail(item)">
          {{ item.title }}
        </div>
        <div class="essay_author">{{ item.hint }}</div>
      </div>
      <div class="essay_image" @click="godetail(item)">
        <img :src="item.images[0]" alt="图片" class="images" />
      </div>
    </div>
    <!-- <div class="loading" @click="getmore" ref="">加载更多</div> -->
    <!-- ref操作节点 -->
    <div class="getmore" @click="getmore" ref="getmore">加载更多</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      maindata: [],
      dades: "",
    };
  },
  created() {
    this.axios
      .get("https://apis.netstart.cn/zhihudaily/stories/latest")
    //   .get("https://apis.netstart.cn/zhihudaily/stories/before/" + this.dades)
      .then((res) => {
        console.log("mainview");
        console.log("mainres", res);
        this.maindata = res.data.stories;
        console.log("mainview", this.maindata);
        this.dades = res.data.date;
        console.log(this.dades);
      });
    // this.scrolltop();
  },
  methods: {
    getmore() {
      console.log("loading");
      this.axios
        .get("https://apis.netstart.cn/zhihudaily/stories/before/" + this.dades)
        .then((res) => {
          console.log(res);
          this.maindata.push(...res.data.stories);
          console.log(...res.data.stories);
          console.log(res.data.stories);
          this.dades = res.data.date;
        });
    },
    scrolltop() {
      // 被卷的高度
      let a = document.scrollTop || document.documentElement.scrollTop;
      // 获取可视高度
      let b = window.innerHeight;
      // 获取到的节点高度
      let c = this.$refs.getmore.offsetTop;
      console.log(a, b, c);
      // a + b - c
      if (a + b - 21 >= c) {
        this.getmore();
      }
    },

    godetail(item) {
      var id = item.id;
      this.$router.push({ name: "Content", query: { id } });
      console.log(id);
    },
  },
  //生命周期 挂载
  mounted() {
    window.addEventListener("scroll", this.scrolltop);
  },
  // 生命周期 销毁
  destroyed() {
    window.removeEventListener("scroll",this.scrolltop)
  },
};
</script>

<style lang="less" scoped>
.myview {
  width: 100vw;
  padding: 3vw 3vw;
  .toall_box {
    display: flex;
    align-items: center;
    margin-top: 20px;
    .text_box {
      width: 76vw;
      .text_title {
      }
      .text_author {
      }
    }
  }
  .img_box {
  }
}
.massage_essay {
  margin-top: 2rem;
  .essay_data {
    width: 100vw;
    height: 6rem;
    margin-top: 2rem;
    display: flex;
    justify-content: space-between;
    .essay_content {
      margin-left: 1rem;
      .essay_title {
        width: 15rem;
        text-align: left;
        font-weight: bold;
      }
      .essay_author {
        margin-top: 0.5rem;
        text-align: left;
        font-size: 0.5rem;
        color: #c4c4c4;
      }
    }
    .essay_image {
      width: 5rem;
      height: 5rem;
      margin-right: 1rem;
      .images {
        width: 100%;
        height: 100%;
      }
    }
    .getmore {
      line-height: 50px;
    }
  }
}
</style>